<template>
    <div class="theme-list-edit">
        <div class="theme-list-edit-card">
            <Row :gutter="20">
                <Col span="12" class="magi">
                    <Card>
                        <p slot="title">
                            <Icon type="ios-film-outline"></Icon>
                            图片上传
                        </p>
                        <Upload accept="image/png, image/jpeg, image/gif, image/jpg" type="drag" action="?"
                                :before-upload="handleBeforeUpload">
                            <div class="upImg">
                                <a>
                                    <Icon type="ios-cloud-upload" size="52"></Icon>
                                </a>
                                <p>点击或将图片拖拽到这里上传</p>
                            </div>
                        </Upload>
                    </Card>
                </Col>
                <Col span="12">
                    <Card>
                        <p slot="title">
                            <Icon type="ios-film-outline"></Icon>
                            图片预览
                        </p>
                        <div class="imgYulan">
                            <img v-if="timeImg!=''" :src="timeImg"/>
                            <a v-else style="text-align: center;font-weight: 500;font-size: 20px;text-align: center;line-height: 368px;display: block">暂无图片</a>
                        </div>
                    </Card>
                </Col>
            </Row>
            <!--<Button style="margin: 30px auto 10px auto;display: block;width: 100px" type="primary" :loading="loading" @click="tijiao">提交</Button>-->
        </div>
        <div class="theme-list-edit-card" style="margin-top: 10px;">
            <Card>
                <p slot="title">
                    <Icon type="edit"></Icon> 请编辑 <a>主题</a> 属性<Switch></Switch>
                </p>
                <!--表单-->
                <div class="formCon">
                    <Form ref="formValidate" :model="formItem" :label-width="90" label-position="left" :rules="rules">
                        <FormItem label="主题名称" prop="input">
                            <Input v-model="formItem.input" placeholder="请输入商品分类名" type="text"></Input>
                        </FormItem>
                        <FormItem label="分类" prop="city">
                            <Select v-model="formItem.city" placeholder="请选择分类">
                                <Option v-for="(key,value) in goodsTypeOne" :value="key.catid">{{key.catname}}</Option>
                            </Select>
                        </FormItem>
                        <FormItem label="排序号"  prop="num">
                            <Input number v-model="formItem.num" placeholder="请输入排序号"></Input>
                        </FormItem>
                        <FormItem label="是否显示">
                            <i-switch v-model="formItem.switch" size="large">
                                <span slot="open">显示</span>
                                <span slot="close">隐藏</span>
                            </i-switch>
                        </FormItem>
                        <FormItem>
                            <Button type="primary" :loading="loading" @click="tijiao">提交</Button>
                            <Button type="ghost" style="margin-left: 8px" @click="handleReset">重置</Button>
                        </FormItem>
                    </Form>
                </div>
            </Card>
        </div>
    </div>
</template>

<script>
    export default {
        name: "theme-list-edit",
        data() {
            const validateNum = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('排序号不能为空'));
                }
                // 模拟异步验证效果
                setTimeout(() => {
                    if (!Number.isInteger(value)) {
                        callback(new Error('请输入数字值'));
                    } else {
                        callback();
                    }
                }, 1000);
            };
            const validateName = (rule, value,callback) => {
                if (!value) {
                    return callback(new Error('主题名不能为空'));
                }else{
                    callback();
                }
            }
            return {
                timeImg: "",
                upimgUrl: "",
                loading:false,
                id:"",
                formItem: {
                    input:"",
                    switch:true,
                    num:"",
                    city: '',
                },
                rules:{
                    input: [
                        { required: true,  validator: validateName, trigger: 'blur' }
                    ],
                    num: [
                        { required: true, validator: validateNum, trigger: 'blur' }
                    ],
                    city: [
                        { required: true, message: '请选择分类', trigger: 'change' }
                    ],
                },
                goodsTypeOne:[],//一级分类
            }
        },
        mounted(){
            if(this.$route.query.isEdit){
                this.id=this.$route.query.id
                this.getChangeInfo()
            }
            this.getTypeOneList()
        },
        methods: {
            //获取修改信息
            getChangeInfo(){
                this.getJsonData("Zhuti/getOne",{id:this.id})
                    .then((res) => {
                        this.timeImg=res.data.pic
                        this.formItem.input=res.data.name
                        this.formItem.switch=res.data.status=="1"?true:false
                        this.formItem.city=res.data.catid
                        this.formItem.num=Number(res.data.sort)
                    })
            },
            //获取商品一级分类
            getTypeOneList(){
                this.getJsonData("Cat/getOneCat")
                    .then((res) => {
                        this.goodsTypeOne=res.data
                    })
            },
            //上传之前的操作
            handleBeforeUpload(file) {
                if ((Math.round(file.size / 1024 * 100) / 100) < 2000) {
                    this.caijianImg(file)
                } else {
                    this.$Notice.error({
                        title: '文件过大',
                        desc: '文件 ' + file.name + '/' + (Math.round(file.size / 1024 * 100) / 100) + 'KB' + '，请上传 2M 以内的图片。',
                        duration: 4.5
                    });
                }
                //禁止默认上传
                return false
            },
            caijianImg(file) {
                let reader = new FileReader();
                reader.onload = () => {
                    this.timeImg = reader.result
                    this.upimgUrl = reader.result
                    reader.onload = null;
                };
                reader.readAsDataURL(file);
            },
            tijiao(){
                if(this.timeImg==""){
                    this.$Message.error("请上传图片");
                }else{
                    this.$refs.formValidate.validate((valid) => {
                        if (valid) {
                            this.upImg()
                        } else {
                            //不做处理
                        }
                    })
                }
            },
            upImg(){
                if(this.$route.query.isEdit){
                    if(this.upimgUrl==""){
                        this.editGoods(this.timeImg)
                    }else{
                        this.$Loading.start();
                        this.loading = true
                        this.upBaseImg("admin/upLoadImages",{image:this.upimgUrl})
                            .then((res) =>{
                                this.editGoods(res.data.url)
                            })
                    }
                }else{
                    this.$Loading.start();
                    this.loading = true
                    this.upBaseImg("admin/upLoadImages",{image:this.upimgUrl})
                        .then((res) =>{
                            this.submitPic(res.data.url)
                        })
                }
            },
            //编辑
            editGoods(url){
                this.getJsonData("Zhuti/changeZhuti",{
                    id:this.id,
                    name:this.formItem.input,
                    status:this.formItem.switch?1:-1,
                    sort:this.formItem.num,
                    catId:this.formItem.city,
                    type:1,
                    pic:url
                },true)
                    .then((res)=>{
                        this.$Message.success("提交成功")
                        this.loading = false
                    })
                    .catch(res=>{
                        this.loading = false
                    })
            },
            //新增
            submitPic(url){
                this.getJsonData("Zhuti/addZhuti",{
                    name:this.formItem.input,
                    status:this.formItem.switch?1:-1,
                    sort:this.formItem.num,
                    catId:this.formItem.city,
                    type:1,
                    pic:url
                },true)
                    .then((res)=>{
                        this.$Message.success("提交成功")
                        this.loading = false
                    })
                    .catch(res=>{
                        this.loading = false
                    })
            },
            handleReset () {
                this.$refs.formValidate.resetFields();
            },
        }
    }
</script>

<style lang="less">
    @import "theme-list-edit";
</style>